<template>
  <div class="jueduibujudiv" ref="jueduibujudiv">
    <div
      class="jueduibujuhuabudiv"
      @drop="dragend"
      @dragover.prevent="1"
      :style="{
        height: '100%',
        width: '100%',
      }"
    >
      <vdr
        :w.sync="item.componentDetail.size.w"
        :h.sync="item.componentDetail.size.h"
        :parent="true"
        :debug="false"
        :min-width="20"
        :min-height="20"
        :isConflictCheck="false"
        :snap="true"
        :snapTolerance="10"
        :scaleRatio="$parent.scale"
        :x.sync="item.componentDetail.position.left"
        :y.sync="item.componentDetail.position.top"
        :active.sync="item.active"
        @refLineParams="getRefLineParams"
        class="test1"
        v-for="(item, index) in editercomlist"
        @dragging="(left, top) => dragging(item.id, left, top)"
        @dragstop="(left, top) => dragstop(item.id, left, top)"
        @activated="vdractive(item)"
        @deactivated="vdrdeactive(item)"
        @resizing="
          (x, y, width, height) => vdrresize(item, x, y, width, height)
        "
      >
        <div class="eachitemdiv">
          <!-- <div class="eachitemdiv" v-if="ifcomponent[item.id]"> -->
          <div
            style="
              position: absolute;
              top: -34px;
              background-color: #719e10b8;
              left: 50px;
              font-size: 25px;
              padding: 0px 10px;
              cursor: pointer;
            "
            v-if="item.active"
            @click="deletecom(index)"
          >
            <i class="el-icon-delete"></i>
          </div>
          <component
            :is="item.code"
            :componentDetail="item.componentDetail"
            v-if="item.update"
          />
        </div>
      </vdr>
      <!--辅助线-->
      <span
        class="ref-line v-line"
        v-for="item in vLine"
        v-show="item.display"
        :style="{
          left: item.position,
          top: item.origin,
          height: item.lineLength,
        }"
      />
      <span
        class="ref-line h-line"
        v-for="item in hLine"
        v-show="item.display"
        :style="{
          top: item.position,
          left: item.origin,
          width: item.lineLength,
        }"
      />
      <!--辅助线END-->
    </div>

    <!-- <div id="toolbar">
      <label>
        <input type="checkbox" name="sync" v-model="sync" disabled />
        Synchronize (use <b>ctrl</b> key)
      </label>
    </div> -->
  </div>
</template>

<script>
import _ from "lodash";

import vdr from "../../../components/vdr/src";
// import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";

// import comlist from "./comlists";

import uuidv1 from "uuid/v1";

import { mapState } from "vuex";

export default {
  name: "app",
  components: {
    vdr,
    // SketchRule
  },
  data() {
    return {
      vLine: [],
      hLine: [],
      comdivs: [],
      draged: {},
      sync: false,
      draggingId: null,
      prevOffsetX: 0,
      prevOffsetY: 0,
      // jueduibujuhuabudivh: 0,
      // jueduibujuhuabudivw: 0,
      ifcomponent: {},
    };
  },

  mounted() {
    window.addEventListener("keydown", (ev) => {
      if (ev.keyCode === 17) {
        this.sync = true;
      }
    });
    window.addEventListener("keyup", (ev) => {
      if (ev.keyCode === 17) {
        this.sync = false;
      }
    });

    this.editercomlist.map((el) => {
      this.$nextTick(function () {
        el.update = true;
      });
    });

    // this.comdivs = Array(10).fill(1)
    // this.comdivs = Array.from({ length: 20 }, function () {
    //   total++;
    //   return total;
    // });
    // this.comdivs = comlist.data;

    // console.log(this.editercomlist);

    // this.editercomlist.push({
    //   id: uuidv1(),
    //   x: 50,
    //   y: 50,
    //   ...{
    //     name: "时间显示组件",
    //     code: "commontitletime",
    //     w: 200,
    //     h: 70,
    //     imgname: "titletime",
    //   },
    //   active: true,
    // });

    // this.$nextTick(() => {
    // this.jueduibujuhuabudivw = this.$refs.jueduibujudiv.getBoundingClientRect().width
    // this.jueduibujuhuabudivh = this.$refs.jueduibujudiv.getBoundingClientRect().height

    //   });
  },
  methods: {
    deletecom(index) {
      this.editercomlist.splice(index, 1);
    },
    vdrdrag(x, y) {
      this.$store.state.editer.editeractived.componentDetail.position.left = x;
      this.$store.state.editer.editeractived.componentDetail.position.top = y;
    },
    vdractive(item) {
      this.$store.state.editer.editeractived = item;
      // this.$store.state.editer.editeractived.componentDetail.
    },
    vdrdeactive(item) {},

    //throttle
    //debounce
    vdrresizeupdate: _.throttle((item,this1) => {

      item.update = false;
      this1.$nextTick(function () {
        item.update = true;
      });

    }, 100),

    vdrresize(item, x, y, width, height) {

      this.$store.state.editer.editeractived.componentDetail.position.left = x;
      this.$store.state.editer.editeractived.componentDetail.position.top = y;
      this.$store.state.editer.editeractived.componentDetail.size.w = width;
      this.$store.state.editer.editeractived.componentDetail.size.h = height;

      this.vdrresizeupdate(item,this);
    },

    handleLine() {},
    handleCornerClick() {},
    dragstart(e, item) {
      this.draged = item;
    },

    dragover(e) {
      // console.log(e);
      // console.log("333333333");
    },

    dragend(e) {
      // console.log(e);
      // console.log("111111");
      let uuid = uuidv1();

      let tmp = _.cloneDeep(this.$store.state.editer.editerdraged);

      let r = {
        id: uuid,
        componentDetail: {
          show: true,
          type: tmp["code"],
          position: {
            left: e.offsetX,
            top: e.offsetY,
          },
          size: {
            w: tmp.w,
            h: tmp.h,
          },
        },
        active: true,
        update: true,
      };

      let rr = {};

      if (_.has(tmp, "componentDetail")) {
        r.componentDetail = Object.assign(
          tmp.componentDetail,
          r.componentDetail
        );
        rr = r;
      } else {
        rr = r;
      }

      delete tmp["w"];
      delete tmp["h"];
      delete tmp["componentDetail"];

      let rrr = Object.assign(rr, tmp);

      this.editercomlist.push(rrr);
      this.$store.state.editer.editeractived = rrr;

      this.$store.state.editer.editeractived.update = false;
      this.$nextTick(function () {
        this.$store.state.editer.editeractived.update = true;
      });
    },

    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    },

    dragging(id, left, top) {
      this.vdrdrag(left, top);

      this.draggingId = id;

      if (!this.sync) return;

      const offsetX = left - this.draggingElement.x;
      const offsetY = top - this.draggingElement.y;

      const deltaX = this.deltaX(offsetX);
      const deltaY = this.deltaY(offsetY);

      this.editercomlist.map((el) => {
        if (el.id !== id) {
          el.componentDetail.position.left += deltaX;
          el.componentDetail.position.top += deltaY;
        }

        return el;
      });
    },
    dragstop(id, left, top) {
      this.editercomlist.map((el) => {
        if (el.id === id) {
          el.componentDetail.position.left = left;
          el.componentDetail.position.top = top;
        }

        return el;
      });

      this.draggingId = null;
      this.prevOffsetX = 0;
      this.prevOffsetY = 0;
    },
    deltaX(offsetX) {
      const ret = offsetX - this.prevOffsetX;

      this.prevOffsetX = offsetX;

      return ret;
    },
    deltaY(offsetY) {
      const ret = offsetY - this.prevOffsetY;

      this.prevOffsetY = offsetY;

      return ret;
    },
  },
  computed: {
    ...mapState({
      editerdraged: (state) => state.editer.editerdraged,
      editeractived: (state) => state.editer.editeractived,
      editercomlist: (state) => state.editer.editercomlist,
    }),
    draggingElement: function () {
      if (!this.draggingId) return;

      return this.editercomlist.find((el) => el.id === this.draggingId);
    },
  },
};
</script>

<style>
.vdr {
  /* transform: translate(0px, 0px) !important; */
}
.jueduibujudiv {
  position: relative;
  width: 100%;
  height: 100%;
}
.jueduibujuhuabudiv {
  /* position: absolute; */
  /* transform: scale(0.362979, 0.362979); */
}
.eachitemdiv {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.comdiv {
  height: 100px;
  width: 1500px;
  background-color: #53f3f355;
  display: flex;
}

.eachcomdiv {
  height: 90px;
  width: 200px;
  background-color: #fbd15055;
  margin: 5px;
}

.test1 {
  /* background-color: rgb(239, 154, 154); */
}
.test2 {
  background-color: rgb(129, 212, 250);
}
.test3 {
  background-color: rgb(174, 213, 129);
}
</style>